<template>
	<scroll-view scroll-y class="points-page">
		<!-- 顶部积分显示区 -->
		<view class="points-header">
			<view class="header-top">
				<text class="title">积分商场</text>
				<view class="exchange-history" @click="goToExchangeHistory">
					<text>兑换记录</text>
				</view>
			</view>
			<view class="points-summary">
				<view class="summary-text">
					<text class="points-title">我的积分</text>
					<text class="points-value">12,580</text>
					<text class="points-subtitle">今日获得：+280积分</text>
				</view>
				<view class="points-rule">
					<text>积分规则</text>
				</view>
			</view>
		</view>

		<!-- 三大功能按钮 -->
		<view class="quick-functions">
			<view class="function-item" v-for="item in functions" :key="item.id">
				<image :src="item.icon" class="function-icon" />
				<text class="function-name">{{ item.name }}</text>
			</view>
		</view>

		<!-- 热门兑换 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">热门兑换</text>
				<text class="section-more" @click="goToAll">查看全部</text>
			</view>
			<view class="product-list">
				<view class="product-item" v-for="item in hotProducts" :key="item.id">
					<image :src="item.image" class="product-image" />
					<text class="product-name">{{ item.name }}</text>
					<view class="product-info">
						<text class="product-points">{{ item.points }} 积分</text>
						<view class="exchange-button">兑换</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 精选商品 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">精选商品</text>
				<text class="section-more" @click="goToAll">查看全部</text>
			</view>
			<view class="product-list">
				<view class="product-item" v-for="item in selectedProducts" :key="item.id">
					<image :src="item.image" class="product-image" />
					<text class="product-name">{{ item.name }}</text>
					<view class="product-info">
						<text class="product-points">{{ item.points }} 积分</text>
						<view class="exchange-button">兑换</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';

	// 三大功能按钮
	const functions = ref([
		{ id: 1, name: '优惠券', icon: 'https://shop-ce.oss-cn-beijing.aliyuncs.com/shop/coupon.png' },
		{ id: 2, name: '实物商品', icon: 'https://shop-ce.oss-cn-beijing.aliyuncs.com/shop/gift.png' },
		{ id: 3, name: '充电券', icon: 'https://shop-ce.oss-cn-beijing.aliyuncs.com/shop/charge.png' },
	]);

	// 热门兑换商品
	const hotProducts = ref([
		{ id: 1, name: '星巴克中杯咖啡券', points: 2800, image: 'https://shop-ce.oss-cn-beijing.aliyuncs.com/shop/starbucks.png' },
		{ id: 2, name: '月度充电无限卡', points: 5000, image: 'https://shop-ce.oss-cn-beijing.aliyuncs.com/shop/charger-card.png' },
	]);

	// 精选商品
	const selectedProducts = ref([
		{ id: 1, name: '移动电源', points: 3000, image: 'https://shop-ce.oss-cn-beijing.aliyuncs.com/shop/powerbank.png' },
		{ id: 2, name: '蓝牙耳机', points: 5000, image: 'https://shop-ce.oss-cn-beijing.aliyuncs.com/shop/earbuds.png' },
	]);

	// 跳转到兑换记录
	const goToExchangeHistory = () => {
		console.log('跳转到兑换记录页面');
	};

	// 查看全部
	const goToAll = () => {
		console.log('跳转到查看全部页面');
	};
</script>

<style scoped>
/* 页面样式 */
.points-page {
	background-color: #f8f9fa;
	padding-bottom: 20rpx;
}

/* 顶部积分显示区 */
.points-header {
	padding: 20rpx;
	background-color: #3b82f6;
	border-bottom-left-radius: 20rpx;
	border-bottom-right-radius: 20rpx;
	color: #fff;
}

.header-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.title {
	font-size: 32rpx;
	font-weight: bold;
}

.exchange-history {
	font-size: 24rpx;
	text-decoration: underline;
	color: #fefefe;
	cursor: pointer;
}

.points-summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #2563eb;
	padding: 20rpx;
	border-radius: 10rpx;
}

.summary-text {
	color: #fff;
}

.points-title {
	font-size: 28rpx;
}

.points-value {
	font-size: 40rpx;
	font-weight: bold;
	margin-top: 10rpx;
}

.points-subtitle {
	font-size: 24rpx;
	margin-top: 10rpx;
}

.points-rule {
	font-size: 24rpx;
	color: #cbd5e1;
}

/* 快捷功能按钮 */
.quick-functions {
	display: flex;
	justify-content: space-around;
	padding: 20rpx 0;
	background-color: #fff;
}

.function-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.function-icon {
	width: 60rpx;
	height: 60rpx;
	margin-bottom: 10rpx;
}

.function-name {
	font-size: 24rpx;
	color: #333;
}

/* 商品列表样式 */
.section {
	margin-top: 20rpx;
	background-color: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
	box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.section-title {
	font-size: 28rpx;
	font-weight: bold;
}

.section-more {
	font-size: 24rpx;
	color: #3b82f6;
	cursor: pointer;
}

.product-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.product-item {
	width: 48%;
	margin-bottom: 20rpx;
}

.product-image {
	width: 100%;
	border-radius: 10rpx;
}

.product-name {
	font-size: 24rpx;
	color: #333;
	margin: 10rpx 0;
}

.product-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product-points {
	font-size: 24rpx;
	color: #3b82f6;
}

.exchange-button {
	background-color: #3b82f6;
	color: #fff;
	font-size: 24rpx;
	padding: 5rpx 10rpx;
	border-radius: 5rpx;
}
</style>